<template>
	<view class="container">
		<!-- <button @click="toUrl()">跳转到Test页面</button> -->
		<view class="container">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 300px;"
				indicator-active-color="pink">
				<swiper-item v-for="item in swiperaImageList">
					<view class="swiper-item">
						<image :src="item.iurl"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="box" @click="toProduct">
				<view>
					<image src="../../static/mendian.png"></image>
					<view class="title">门店自取</view>
					<view class="content">点单无需排队</view>
				</view>
				<view>
					<image src="../../static/waimai.png"></image>
					<view class="title">外卖</view>
					<view class="content">配送到家</view>
				</view>
			</view>
			<view class="info">
				<view>
					<view class="info-title">积分商城</view>
					<view class="info-text">点击了解详情》</view>
					<image src="../../static/sc.png"></image>
				</view>
				<view>
					<view class="info-title">积分签到</view>
					<view class="info-text">点击了解详情》</view>
					<image src="../../static/qd.png"></image>
				</view>
				<view>
					<view class="info-title">我的优惠券</view>
					<view class="info-text">点击了解详情》</view>
					<image src="../../static/yhj.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				swiperaImageList: [{
						iurl: "../../static/i4.png"
					},
					{
						iurl: "../../static/i3.png"
					},
					{
						iurl: "../../static/i2.png"
					},
					{
						iurl: "../../static/i1.png"
					}, {
						iurl: "../../static/i4.png"
					},
					{
						iurl: "../../static/i3.png"
					},
					{
						iurl: "../../static/i2.png"
					},
					{
						iurl: "../../static/i1.png"
					}
				],
			}
		},

		onLoad() {},

		methods: {
			toUrl() {
				uni.navigateTo({
					url: "/pages/test/test?text=我是从index页面传递过来的123&id=999"
				})
			},
			toProduct() {
				uni.switchTab({
					url: "/pages/product/product"
				})
			}
		}
	}
</script>

<style scoped>
	.swiper-item {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.container {
		background-color: #f5f5f5;
	}

	.box {
		display: flex;
		justify-content: space-around;
		margin: 30px 10px;
		background-color: #fff;
		border-radius: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.box image {
		width: 100px;
		height: 100px;
	}

	.box>view view {
		text-align: center;
	}

	.title {
		font-weight: bold;
		font-size: 25px;
		margin-bottom: 5px;
	}

	.content {
		color: #ccc;
	}

	.info {
		display: flex;
		justify-content: space-around;

	}

	.info view {
		text-align: center;
	}

	.info image {
		width: 70px;
		height: 70px;

	}

	.info>view {
		line-height: 35px;
		background: pink;
		padding: 20px;
	}

	/* nth-child用来选择元素 */
	.info>view:nth-child(1) {
		background: #f5f6fa;
	}

	.info>view:nth-child(2) {
		background: #fdf7eb;
	}

	.info>view:nth-child(3) {
		background: rgb(242, 246, 229);
	}

	.info-title {
		font-weight: bold;
		font-size: 20px;
	}

	.info-text {
		color: #ccc;
		font-size: 13px;
		margin-bottom: 5px;
	}
</style>